// @Author: ls <ls-mac>
// @Date:   2020-05-18 14:01:03
// @Last modified by:   ls-mac
// @Last modified time: 2020-05-20 13:26:28

* {
  margin: 0;
  padding: 0;
}
html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-family: "Microsoft YaHei", arial, simsun, sans-serif;
  font-size: 12px;
}

a {
  cursor: pointer;
}

li {
  list-style: none;
}

input:focus,
button:focus {
  outline: none !important;
}

#mapContainer {
  width: 100%;
  height: 100%;

  .BMap_cpyCtrl {
    display: none;
  }

  .anchorBL {
    display: none;
  }
  .BMapLabel {
  }

  .map-label-motor:before {
    background-color: rgba(0, 164, 234, 1);
    border: 4px solid rgba(0, 102, 195, 1);
  }

  .map-label-water:before {
    background-color: rgba(153, 176, 0, 1);
    border: 4px solid rgba(104, 120, 0, 1);
  }

  .map-label-rail:before {
    background-color: rgba(255, 114, 84, 1);
    border: 4px solid rgba(176, 35, 35, 1);
  }

  .BMapLabel .map-label-conatiner:before {
    content: "";
    width: 20px;
    height: 20px;
    border-top-color: transparent;
    border-left-color: transparent;
    position: absolute;
    z-index: -9999999;
    left: 50%;
    top: 100%;
    margin-top: -14px;
    margin-left: -10px;
    transform: rotate(45deg);
  }
}
#listContainer {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 20px;
  right: 20px;
  border-radius: 6px;
  width: 450px;
  height: calc(100% - 40px);
  color: #fff;

  > li {
    flex: 1;
    background: rgba(51, 51, 51, 0.35);
    margin-bottom: 10px;
    border-radius: 6px;
    > label {
      font-size: 20px;
      font-weight: bold;
      display: inline-block;
      width: 100%;
      text-align: left;
      padding: 20px 12px 12px;
    }
    > ul {
      > li {
        cursor: pointer;
        flex-direction: row;
        display: flex;
        font-size: 18px;
        height: 30px;
        line-height: 30px;
        margin: 2px 4px;
        padding: 10px 12px;
        background: rgba(0, 0, 0, 0.4);
        transition: all 0.3s;
        > span {
          text-align: left;
          &:nth-child(1) {
            width: 60px;
          }
          &:nth-child(2) {
            min-width: 120px;
          }
          i {
            display: inline-block;
            width: 30px;
            height: 30px;
          }
          .icon-motor {
            background-image: url(../../img/map-images/truck_w@2x.png);
          }
          .icon-rail {
            background-image: url(../../img/map-images/icon-rail.png);
          }
          .icon-water {
            background-image: url(../../img/map-images/icon-water.png);
          }
          i {
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }
      > li.ui-motor {
        background: linear-gradient(
          270deg,
          rgba(0, 164, 234, 1) 0%,
          rgba(0, 102, 195, 1) 100%
        );
        .icon-motor {
          background-image: url(../../img/map-images/truck_w备份@2x.png);
        }
      }
      > li.ui-water {
        background: linear-gradient(
          270deg,
          rgba(153, 176, 0, 1) 0%,
          rgba(104, 120, 0, 1) 100%
        );
        .icon-water {
          background-image: url(../../img/map-images/icon-water2.png);
        }
      }

      > li.ui-rail {
        background: linear-gradient(
          270deg,
          rgba(234, 81, 81, 1) 0%,
          rgba(176, 35, 35, 1) 100%
        );
        .icon-rail {
          background-image: url(../../img/map-images/icon-rail2.png);
        }
      }

      > li:hover {
        opacity: 0.8;
      }
      > li.ui-motor:hover {
        background: linear-gradient(
          270deg,
          rgba(0, 102, 195, 1) 0%,
          rgba(0, 164, 234, 1) 100%
        );
        opacity: 0.8;
      }
      > li.ui-water:hover {
        background: linear-gradient(
          270deg,
          rgba(104, 120, 0, 1) 0%,
          rgba(153, 176, 0, 1) 100%
        );
        opacity: 0.8;
      }
      > li.ui-rail:hover {
        background: linear-gradient(
          270deg,
          rgba(176, 35, 35, 1) 0%,
          rgba(234, 81, 81, 1) 100%
        );
        opacity: 0.8;
      }
    }
  }
}
